<template>
	<view class="page-box">
		<view class="pay-header">
			<view class="left">
				<view class="fkggr">
					付款给个人
				</view>
				<view class="username">
					{{payInfo.username}}
				</view>
			</view>
			<view class="avatar">
				<u-image width="200rpx" height="200rpx" :src="payInfo.avatar"></u-image>
			</view>
		</view>
		<view class="pay-content">
			<view class="title">
				金额
			</view>
			<view class="price-box">
				<view class="unit">
					¥
				</view>
				<u-keyboard ref="uKeyboard" safe-area-inset-bottom :cancel-btn="false" :show-tips="false" :confirm-btn="false"
					 :mask-close-able="false"  :mask="false" mode="number"
					v-model="show" @change="handleChange" @backspace="handleBackspace">
	<view class="confirm-btn">
		<view class="btn-text" @click="handleConfirm">
			确认支付
		</view>
	</view>				
					</u-keyboard>
				<view class="price-input" @click="show=true">
					{{value}}
				</view>
				<!-- <input class="price-input" type="digit"> -->
			</view>
			<view class="bl">
				当前付款抵扣金比例:{{payInfo.deduction}}%
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				payInfo: {
					// username: '',
					// avatar: '',
					// deduction: '',
					// uid:''
				},
				show: true,
				value: '',
				userinfo: {},
			}
		},
		onLoad(options) {
			const scene = decodeURIComponent(options.scene)
			const [uid, deduction] = scene.split(',')
			this.payInfo.uid = uid
			this.payInfo.deduction = deduction
			uni.setStorageSync('isToUrl', '/subcontract/payment/payment?scene=' + options.scene)
			this.massage()
			this.getUser()
		},
		methods: {
			getUser() {
				this.$api.getUserData({
					id: this.payInfo.uid
				}, res => {
					console.log(res.data.data)
					this.payInfo.avatar = res.data.data.avatar
					this.payInfo.username = res.data.data.name

				})
			},
			massage() {
				this.$api.get_my_massage({}, res => {
					if (res.data.code == 1) {
						this.userinfo = res.data.data.data
					}
				})
			},
			handleConfirm() {
				this.show = true
				if (/^\d+(\.\d{1,2})?$/.test(this.value)) {
					this.createOrder()
				} else {
					uni.showToast({
						icon: 'none',
						title: '请正确输入金额',
						duration: 2000
					});
				}
			},
			createOrder() {
				const params = {
					receive_user: this.payInfo.uid,
					status: 0,
					deduction_percent: this.payInfo.deduction.replace('%', ''),
					pay_amount: this.value,
					pay_user: this.userinfo.id
				}
				this.$api.createScanOrder(params, res => {
					console.log(res)
					this.pay(res.data.data.target_id)
				})
			},
			pay(target_id) {
				let params = {
					target_id: target_id,
					target_type: 'scan',
					pay_type: 'wechat',
					client: 'JSAPI',
					total_amount: this.value
				}
				this.$com.weChatPay2(params, 'wechat').then(ok => {
					this.$u.route({
						type: 'reLaunch',
						url: '/pages/my/my'
					})
				})
			},
			handleChange(val) {
				this.value += val;
			},
			handleBackspace(val) {
				if (this.value.length) this.value = this.value.substr(0, this.value.length - 1);

			},
		}
	}
</script>

<style>
	.page-box {
		width: 100vw;
		height: 100vh;
		background-color: #b1b2b3;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
	}

	.pay-header {
		width: 100%;
		min-height: 200rpx;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 40rpx;
	}
.confirm-btn{
	display: flex;
	justify-content: flex-end;
	padding: 20rpx 30rpx;
	
}
.btn-text{
	background-color:  #2d8cf0;
	color: #fff;
	font-size: 40rpx;
	padding: 10rpx 20rpx;
	}
	.left {
		font-size: 40rpx;
		font-weight: bold;
	}

	.username {
		color: red;
	}

	.pay-content {
		margin-top: 10rpx;
		flex: 1;
		width: 100%;
		background-color: #fff;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		padding: 30rpx 40rpx;
	}

	.title {
		padding-top: 100rpx;
		font-size: 30rpx;

	}

	.price-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx solid #eee;
	}

	.unit {
		font-size: 80rpx;
		font-weight: bold;
	}

	.price-input {
		flex: 1;
		padding-left: 30rpx;
		font-size: 80rpx;
		height: 58px;
		line-height: 58px;
	}

	.bl {
		margin-top: 30rpx;
		color: red;
	}
</style>